<template>
    <a-result status="403" title="403" sub-title="参数错误" v-if="Is403">
        <template #extra>
            <a-button type="primary" @click="this.$router.push('/')">返回主页</a-button>
        </template>
    </a-result>
    <a-result status="404" title="404" sub-title="数据不存在" v-if="Is404">
        <template #extra>
            <a-button type="primary" @click="this.$router.push('/')">返回主页</a-button>
        </template>
    </a-result>
    <div class="Member_card" v-if="Info">
        <div class="card">
            <div class="nav">
                <div class="avatar">
                    <img :src="`https://q.qlogo.cn/g?b=qq&nk=${Info.member_qq}&s=640`" alt="">
                </div>
                <div class="fgx"></div>
                <div class="bar-info" v-if="Info">
                    <ul>
                        <li>
                            <span class="label">BID</span>
                            <span>{{ Info.bid }}</span>
                        </li>
                        <li>
                            <span class="label">昵称</span>
                            <span>{{ Info.member_name }}</span>
                        </li>
                        <li v-if="douyuInfo">
                            <span class="label">斗鱼昵称</span>
                            <span>{{ douyuInfo.nickname ?? "[未绑定]" }}</span>
                        </li>
                        <li v-else>
                            <span class="label">斗鱼昵称</span>
                            <span>{{ "[未绑定]" }}</span>
                        </li>
                        <li v-if="douyuInfo">
                            <span class="label">斗鱼等级</span>
                            <span>{{ douyuInfo.level ?? "[未绑定]" }}</span>
                        </li>
                        <li v-else>
                            <span class="label">斗鱼等级</span>
                            <span>{{ "[未绑定]" }}</span>
                        </li>
                        <li>
                            <span class="label">Minecraft ID</span>
                            <span>{{ Info.member_mc ?? "[未绑定]" }}</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
var axios = require('axios');
var FormData = require('form-data');
import { message } from 'ant-design-vue'
import Api from '@/api/api';


export default {
    data() {
        return {
            Is404: false,
            Is403: false,
            Info: '',
            douyuInfo: '',
            test: ''
        }
    },
    methods: {
        getInfo(bid) {
            var data = new FormData();
            data.append('apikey', Api.apikey);
            data.append('bid', bid);

            var config = {
                method: 'post',
                url: 'https://api.dbhg.top/api/dbhg/member',
                data: data
            };

            var that = this

            axios(config)
                .then(function (response) {
                    if (response) {
                        if (response.data) {
                            if (response.data.code == 200) {
                                that.Info = response.data.data
                                that.getdouyuInfo(response.data.data.member_douyuid)
                            }
                            if (response.data.code == 404) {
                                that.Is404 = true
                                that.livemessage("error", "404 - 数据不存在");
                            }
                        }
                    }
                })
                .catch(function (error) {
                    console.error(error);
                });
        },
        getdouyuInfo(douyu_id) {
            var data = new FormData();
            data.append('apikey', Api.apikey);
            data.append('douyu_id', douyu_id);

            var config = {
                method: 'post',
                url: 'https://api.dbhg.top/api/dbhg/douyuinfo',
                data: data
            };

            var that = this

            axios(config)
                .then(function (response) {
                    if (response) {
                        if (response.data) {
                            if (response.data.code == 200) {
                                that.douyuInfo = response.data.data
                                that.livemessage("success", `加载${that.Info.member_name}的数据成功`)
                            }
                        }
                    }
                })
        },
        livemessage(type, contents) {
            if (type == "success") {
                var config = {
                    content: contents,
                    key: "live",
                }
                message.success(config)
            }
            if (type == "loading") {
                var config = {
                    content: contents,
                    key: "live",
                }
                message.loading(config)
            }
            if (type == "info") {
                var config = {
                    content: contents,
                    key: "live",
                }
                message.info(config)
            }
            if (type == "error") {
                var config = {
                    content: contents,
                    key: "live",
                }
                message.error(config)
            }
        },
    },
    mounted() {
        var name = Number(this.$route.params.name)
        var num = /[0-9]/
        if (name != "" & num.test(name)) {
            this.getInfo(name);
            this.livemessage("loading", `加载数据中..`)
        } else {
            this.Is403 = true
            this.livemessage("error", "参数错误");
        }

    }
}
</script>

<style scoped lang="scss">
.Member_card {
    .card {
        .nav {
            .avatar {
                img {
                    width: 150px;
                    height: 150px;
                    border-radius: 50%;
                    outline: 2px solid rgba($color: #000000, $alpha: 1.0);
                }

                margin-top: 20px;
            }

            .text {
                h1 {
                    font-size: 20pt;
                }
            }

            .bar-info {
                ul {
                    list-style-type: none;

                    li {
                        font-size: 10pt;
                        width: 100px;
                        color: rgba($color: #409EFF, $alpha: 1.0);
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                    }

                    .label {
                        font-size: 12pt;
                        margin-bottom: 10px;
                        color: rgba($color: #000000, $alpha: 1.0);
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                    }

                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: space-around;
                    flex-wrap: wrap;
                }

                width: 100%;
                height: 30%;
                margin-top: 50px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                flex-wrap: wrap;
            }

            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
        }

        margin: 50px;
        width: 800px;
        height: 500px;
        border-radius: 20px;
        box-shadow: 0 0 10px 0 rgba($color: #000000, $alpha: 0.2);
        display: flex;
    }

    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 800px) {
    .Member_card {
        .card {
            .nav {
                .avatar {
                    img {
                        width: 150px;
                        height: 150px;
                        border-radius: 50%;
                        outline: 2px solid rgba($color: #000000, $alpha: 1.0);
                    }

                    margin-top: 20px;
                }

                .text {
                    h1 {
                        font-size: 20pt;
                    }
                }

                .bar-info {
                    ul {

                        li {
                            font-size: 10pt;
                            width: 100px;
                            color: rgba($color: #409EFF, $alpha: 1.0);
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                        }

                        .label {
                            font-size: 12pt;
                            margin-bottom: 10px;
                            color: rgba($color: #000000, $alpha: 1.0);
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                        }

                        width: 100%;
                        height: 100%;
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        flex-wrap: wrap;
                        justify-content: space-evenly;
                    }

                    width: 100%;
                    height: 30%;
                    margin-top: 50px;
                    list-style-type: none;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    flex-wrap: wrap;
                }

                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                flex-direction: column;
                justify-content: center;
            }

            margin: 50px;
            width: 90%;
            height: 500px;
            border-radius: 20px;
            box-shadow: 0 0 10px 0 rgba($color: #000000, $alpha: 0.2);
            display: flex;
        }

        width: 100%;
        height: 100%;
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}
</style>